// import {Button} from 'antd'
import {useState,useEffect} from 'react'
import './index.less'
// import store from '../../../redux/store'
export default function Member(props){

  useEffect(()=>{
    /**
     * 当我们监听值的变化的时候 这个钩子至少执行两次，第一次是当进入页面的时候就会执行，第二次是监听的数据变化的时候会执行一次
     * 
     * 当我们监听的 [] 其实确实是相当于是componentDidMounted 因为 那个时候组件已经是成功挂载了，组件挂载成功的时候 props 接收的值并没有接收成功的
     */
    setUserData(props&&props.userData)
  },[props])
  // console.log('接收到的参数',props)
  const [userData,setUserData] = useState({})
  
  

  return (
    <div className="background-container">
      <img className="bg" src={userData&&userData.background} alt="bg" />
      <div className="imgContainers column flex-center">
        
        <div className="avatar flex-center">
          <img src={userData&&userData.header} alt="header" width="94%" height="94%" />
        </div>
        <p className='userDesc1'>{userData&&userData.name}</p>
        <p className='userDesc2'>{userData&&userData.descript}</p>
      </div>
      <div className="userData flex-center cardBox">
        <ul className="flex-center">
          <li className="column flex-center">
            <span>{userData&&userData.view}</span>
            <span>被访问量</span>
          </li>
          <li className="slider-line"></li>
          <li className="column flex-center">
            <span>90</span>
            <span>发布文章</span>
          </li>
          <li className="slider-line"></li>
          <li className="column flex-center">
            <span>0</span>
            <span>粉丝数量</span>
          </li>
          <li className="slider-line"></li>
          <li className="column flex-center">
            <span>7</span>
            <span>标签数量</span>
          </li>
        </ul>

        {/* <div className="check-area">
          <Button style={{marginRight:'20px'}}>私信</Button>
          <Button type="primary">关注</Button>
        </div> */}
      </div>
    </div>
  )
}